import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { add, countAsync } from './store'
export default function Count() {
  const result = useSelector((state) => {
    return {
      count: state.count.count,
      isShow: state.count.isShow,
    }
  })
  const dispatch = useDispatch()
  return (
    <div>
      {!result.isShow ? <p>{result.count}</p> : <h1>正在异步加载,请稍后...</h1>}
      <button
        onClick={() => {
          dispatch(add(3))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(countAsync())
        }}
      >
        + async
      </button>
    </div>
  )
}
